<template>
    <div class="operation">
        <div class="operation-title">
            <h5>操作日志</h5>
        </div>
        <div class="operation-centent">
            <div class="times" >
        		选择时间期间:
                <el-date-picker
                    v-model="value1"
                    type="datetime"
                    @change="handleStartChange"
                    placeholder="开始时间">
                </el-date-picker>
                -
                <el-date-picker
                    v-model="value2"
                    type="datetime"
                    @change="handleEndChange"
                    placeholder="结束时间"
                    style="margin-right:30px;">
                </el-date-picker> 
                用户名:<el-input v-model="userName" placeholder="请输入姓名" style="width:150px;margin-left:5px;"></el-input>
                <el-button type="primary" @click="getPageSource" style="margin:1px 0 0 10px;">查询</el-button>
            </div> 
            <div class="table-b">
                    <el-table
                        :data="tableData2"
                        style="width: 98%;margin: auto;"
                        >
                        <el-table-column
                        prop="userName"
                        label="用户名"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        prop="roleName"
                        label="用户角色"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        prop="departmentName"
                        label="部门名称">
                        </el-table-column>
                        <el-table-column
                        prop="setName"
                        label="公司名称">
                        </el-table-column>
                        <el-table-column
                        prop="operationType"
                        label="操作类型">
                            <template scope="scope">
                                <span>{{scope.row.operationType}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="operationTime"
                        label="操作时间">
                        </el-table-column>
                        <el-table-column
                        prop="operationItem"
                        label="操作事项">
                            <template scope="scope">
                                <span>{{scope.row.operationItem}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="changeContent"
                        label="变更内容">
                        </el-table-column>
                    </el-table>
            </div>
            <div class="block">
                <span class="displayShow">共 {{totalNum}} 条记录</span>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="[10,20,30,50,100, 200]" :page-size.sync="pageSize" layout="sizes,prev, pager, next" :total="totalNum">

                </el-pagination>
            </div>
        </div>  
    </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from "vue";
import { DatePicker,Table,TableColumn,Pagination,} from "element-ui";
Vue.use(DatePicker);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination)

export default {
  data() {
    return {

      value1: '',
      value2: '',
      saveValue1:'',
      saveValue2:'',
      userName:'',
      tableData2: [],
      pageNo:1,
      pageSize:30,
      
      totalNum:0,

    };
  },
  mounted: function() {

    this.getPageSource();
  },
  filters:{
        handleExcuteType:function(val){
            console.log(val,'handleExcuteType');
            if (val == 'SysOperation') {
                return '系统操作'
            }  else {
                return ''
            }
        },

        handleOperationItem:function(val){
            if (val == 'LoginOperation') {
                return '登录操作'
            } else {
                return ''
            }
        }
  },
  methods: {


    handleSizeChange(val) {
        this.pageNo=1;
        this.pageSize = val;
        this.getPageSource();
          
    },
    handleCurrentChange(val) {

        this.pageNo = val;
        this.getPageSource();

    },

    getPageSource(){
      var params={
        "beginTimeStr": this.saveValue1 ,
        "endTimeStr": this.saveValue2 ,
        "pageNo": this.pageNo,
        "pageSize": this.pageSize,
        "userName": this.userName
      }
      this.Axios
        .Post(this.URL.queryLogList.url, params)
        .then(res=> {
            this.tableData2 = res.data.datas;
            this.totalNum = res.data.total;
        });
    },
    handleStartChange:function(val){
      console.log(val,'start');
        this.saveValue1 = val;
    },
    handleEndChange:function(val){
      console.log(val,'end');
        this.saveValue2 = val;
    },
    save() {
      let params = {
        setId: this.id,
        descrshort: this.descrshort,
        position: this.checkList
      };
      //   console.log(this.checkList, "checkList");
      this.Axios.Post(this.URL.savekeyPostions.url, params).then(res => {
        // console.log(res.data, "res.data");
      });
      this.dialogTableVisible = false;
    }
  },
  props: {

  },

  beforeDestroy: function() {

  },
  components: {

  }
};
</script>

<style scoped>
.operation-title {
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  color: #6c6a6c;
  padding: 15px 15px 7px;
  min-height: 48px;
  text-align: center;
  font-size:18px;
}
.operation-centent {
  min-height:600px;
  padding: 0px 0px 10px;
  clear: both;
  background-color: #ffffff;
  color: inherit;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.operation-centent .times{
    margin:40px 10px 50px 20px;
    color:#6c6a6c;
    font-size: 14px;
    font-weight: 600;   
}
.operation .row {
  margin-right: -10px;
  margin-left: -10px;
}
.operation .block {
    margin: 15px 1%;
    line-height: 32px;
}

.operation .block>div {
    display: inline-block;
}
</style>
